<template>
  <fui-nav-bar
    isOccupy
    isFixed
    background="#0052D9"
    title="报修审核"
    color="#fff"
    @leftClick="leftClick"
    @rightClick="rightClick"
  >
    <fui-icon color="#fff" name="arrowleft"></fui-icon>
    <!-- <template v-slot:right>
      <fui-icon color="#fff" name="plus"></fui-icon>
    </template> -->
  </fui-nav-bar>
  <view class="viewport">
    <view class="warp">
      <view class="segmented" style="">
        <fui-segmented-control
          :values="values"
          @click="sectionChange"
        ></fui-segmented-control>
      </view>
      <view class="head">
        <view class="ipt">
          <u--input
            v-model="searchKeyword"
            placeholder="请输入"
            activeColor="#359"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            @change="handleSearch"
          ></u--input>
        </view>
        <view class="screen" @click="screen">
          <image
            class="img"
            src="/static/images/index/shaixuan.svg"
            mode=""
          ></image>
          筛选
        </view>
      </view>
      <scroll-view
        class="scroll-view"
        :refresher-triggered="refreshing"
        refresher-enabled
        scroll-y="true"
        lower-threshold="20"
        @scrolltolower="onScrollToLower"
        @refresherrefresh="onRefresh"
        refresher-background="#f6f6f6"
      >
        <view class="port">
          <view
            class="ul"
            v-for="item in list"
            :key="item.id"
            @click="particulars(item)"
          >
            <view class="title">{{ item.applyTitle }}</view>
            <view class="li">
              <span class="left">报修单号</span>
              <span>{{ item.applyCode }}</span>
            </view>
            <view class="li">
              <span class="left">设备名称</span>
              <span>{{ item.deviceName }}</span>
            </view>
            <view class="li">
              <span class="left">设备编号</span>
              <span>{{ item.deviceCode }}</span>
            </view>
            <view class="li">
              <span class="left">存放位置</span>
              <span>{{ item.storageLocation }}</span>
            </view>

            <view class="footer">
              <span>{{ item.createTime }}</span>
              <view class="audit">{{
                item.status === 1 ? "待审核" : "已审核"
              }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { nextTick, ref, onMounted, onUnmounted } from "vue";
import { getRepairApplyList } from "@/pages/api/subpkg_index/warranty.js";

// 数据状态管理
const list = ref([]);
const searchKeyword = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const curNow = ref(0);
const refreshing = ref(false);

// 筛选条件
const filterConditions = ref({
  applyTitle: "", // 报修主题
  deviceName: "", // 设备名称
  deviceCode: "", // 设备编号
  storageLocation: "", // 存放位置
  repairLevel: "", // 紧急程度
  status: "", // 审核状态
  applyDateStart: "", // 开始时间
  applyDateEnd: "", // 结束时间
  applyUser: "", // 提交人
});

// 创建响应式引用
const values = ref([
  {
    id: 1,
    name: "待审核(0)",
  },
  {
    id: 2,
    name: "已审核(0)",
  },
]);

// 获取列表数据
const getList = async (isRefresh = false) => {
  try {
    const params = {
      current: currentPage.value,
      size: pageSize.value,
      status: curNow.value === 0 ? 1 : 5,
      keyword: searchKeyword.value,
      applyTitle: filterConditions.value.applyTitle,
      deviceName: filterConditions.value.deviceName,
      deviceCode: filterConditions.value.deviceCode,
      storageLocation: filterConditions.value.storageLocation,
      repairLevel:
        filterConditions.value.repairLevel === "全部"
          ? ""
          : filterConditions.value.repairLevel,
      applyDateStart: filterConditions.value.applyDateStart,
      applyDateEnd: filterConditions.value.applyDateEnd,
      applyUser: filterConditions.value.applyUser,
    };

    const res = await getRepairApplyList(params);
    if (res.code === 200) {
      const { records, total: totalCount } = res.data;
      if (isRefresh) {
        list.value = records;
      } else {
        list.value = [...list.value, ...records];
      }
      total.value = totalCount;

      // 更新标签显示的数量
      const pendingCount = totalCount;
      values.value[curNow.value].name = `${
        curNow.value === 0 ? "待审核" : "已审核"
      }(${pendingCount})`;
    }
  } catch (error) {
    console.error("获取列表失败:", error);
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};

// 切换标签
const sectionChange = (e) => {
  curNow.value = e.index;
  currentPage.value = 1;
  list.value = [];
  getList(true);
};

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
  list.value = [];
  getList(true);
};

// 下拉刷新
const onRefresh = async () => {
  refreshing.value = true;
  currentPage.value = 1;
  await getList(true);
  refreshing.value = false;
  uni.showToast({
    title: "刷新成功",
    icon: "none",
  });
};

// 上拉加载更多
const onScrollToLower = async () => {
  if (list.value.length >= total.value) {
    uni.showToast({
      title: "没有更多数据了",
      icon: "none",
    });
    return;
  }
  currentPage.value += 1;
  await getList();
};

const leftClick = () => {
  uni.reLaunch({
    url: "/pages/index/index",
  });
};

const rightClick = () => {};

const screen = () => {
  uni.navigateTo({
    url: "/subpkg_index/warranty/audit",
  });
};

// 去详情页
const particulars = (item) => {
  uni.navigateTo({
    url: `/subpkg_index/warranty/particulars?id=${item.id}&status=${item.status}`,
  });
};

// 状态码转换函数
const getStatusCode = (status) => {
  const statusMap = {
    待审核: 1,
    驳回: 2,
    已撤回: 3,
    审核中: 4,
    已完成: 5,
    待维修: 6,
    维修中: 7,
  };
  return statusMap[status] || "";
};

// 监听筛选数据
onMounted(() => {
  getList(true);

  // 添加事件监听
  uni.$on("filterData", (data) => {
    console.log("接收到的筛选数据：", data);
    // 确保数据正确赋值
    filterConditions.value = {
      applyTitle: data.applyTitle || "",
      deviceName: data.deviceName || "",
      deviceCode: data.deviceCode || "",
      storageLocation: data.storageLocation || "",
      repairLevel: data.repairLevel || "",
      status: data.status || "",
      applyDateStart: data.applyDateStart || "",
      applyDateEnd: data.applyDateEnd || "",
      applyUser: data.applyUser || "",
    };
    // 重置页码并重新获取数据
    currentPage.value = 1;
    getList(true);
  });
});

// 在组件卸载时移除事件监听
onUnmounted(() => {
  uni.$off("filterData");
});
</script>

<style lang="scss" scoped>
page {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.viewport {
  flex: 1;
  display: flex;
  // height: 100%;
  overflow: hidden;
  flex-direction: column;
}

.warp {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  .segmented {
    padding: 24rpx;
    background-color: #fff;
  }

  /*  #ifdef  APP-PLUS || H5 */
  .scroll-view {
    flex: 1;
    height: 100%;
    // height: 80vh;
    padding-bottom: 240rpx;
  }
  /*  #endif  */

  /*  #ifdef  MP-WEIXIN  */
  .scroll-view {
    // flex: 1;
    // height: 100%;
    height: 80vh;
  }
  /*  #endif  */
  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 0 20rpx 20rpx;
    // margin-bottom: 24rpx;
    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
  .port {
    .ul {
      margin-bottom: 24rpx;
      background-color: #fff;
      padding: 0 30rpx;

      .title {
        color: #0052d9;
        font-size: 35rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
      }
      .li {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        .left {
          color: #000;
          margin-right: 30rpx;
        }
      }
      .footer {
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        .audit {
          border-radius: 25rpx;
          border: 1rpx solid #0052d9;
          height: 48rpx;
          width: 120rpx;
          display: flex;
          font-size: 28rpx;
          color: #0052d9;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
